<template>
	<z-paging ref="paging" v-model="dataList" @query="queryList">
		<view class="xp20-25" style="border-radius: 24rpx;">

			<view class="info xbgf xflex-x-between" @click="toPage('/pages/index/rich/rich?type=2&id='+item.id)" v-for="(item,index) in dataList" :key="index">
				<view class="info-lab">
					{{item.title}}
				</view>
				<image class="info-gd" src="/static/image/mine/jt.png" mode=""></image>
			</view>

		</view>
	</z-paging>
</template>

<script setup>
	import {
		supportlists
	} from "/network/home.js"
	import {
		ref
	} from 'vue';
	const paging = ref(null)
	// v-model绑定的这个变量不要在分页请求结束中自己赋值，直接使用即可
	const dataList = ref([])
	const toPage = (url) =>{
		uni.navigateTo({
			url:url
		})
	}
	const queryList = (pageNo, pageSize) => {
		// 此处请求仅为演示，请替换为自己项目中的请求
		supportlists({
			page_no: pageNo,
			page_size: pageSize
		}).then(res => {
			console.log(res);
			dataList.value.push(...res.data.lists)
		}).catch(res => {
			// 如果请求失败写paging.value.complete(false);
			// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
			// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
			paging.value.complete(false);
		})
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
	}

	.info {
		padding: 47rpx 37rpx;
		border-bottom: 1rpx solid #EEEEEE;

	}

	.info-lab {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
	}

	.info-gd {
		width: 16rpx;
		height: 16rpx;
	}
</style>